<template>
<div>
  <div class="content">
    <div class="count">
      <div class="ctitle">
        <div style="margin-left: 15px;float:left;margin-top: 8px;margin-bottom: 6px"><img style="align-content: center" src="../assets/stu/ico_list_statistics.png" height="32" width="32"/></div>
        <div style="float: left;vertical-align: middle;line-height: 50px;margin-left: 10px;color: #ff5d44">统计</div>
      </div>
      <div class="ccontent">
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="5"><div style="background: #08c9ab;cursor: pointer" @click="goTask">
            <div>
              <p>实训任务</p>
              <hr>
              <p class="count-num">11</p>
            </div>
          </div></el-col>
          <el-col :span="5"><div style="background: #5ad2fe;cursor: pointer" @click="goExam">
            <p>考试测评</p>
            <hr>
            <p class="count-num">2</p>
          </div></el-col>
          <el-col :span="5"><div style="background: #499aff">
            <p>实训报告</p>
            <hr>
            <p class="count-num">0</p>
          </div></el-col>
          <el-col :span="5"><div style="background: #b095ff;cursor: pointer" @click="goEask">
            <p>E问发帖数量</p>
            <hr>
            <p class="count-num">6</p>
          </div></el-col>

        </el-row>
      </div>
    </div>
    <div class="msg">
      <div class="ctitle">
        <div style="margin-left: 15px;float:left;margin-top: 8px;margin-bottom: 6px"><img style="align-content: center" src="../assets/stu/ico_notice_red.png" height="32" width="32"/></div>
        <div style="float: left;vertical-align: middle;line-height: 50px;margin-left: 10px;color: #ff5d44">通知</div>
      </div>
      <div class="ccontent">
      </div>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    methods: {
      goTask () {
        this.$router.push({path: '/platform/myTask'})
      },
      goExam () {
        this.$router.push({path: '/platform/myExam'})
      },
      goEask () {
        this.$router.push({path: '/platform/discussion'})
      }
    }
  }
</script>

<style scoped lang="less">
  @border-style: 1px solid #f2f2f2;
  .content{
    margin-top: 20px;
    margin-bottom: 20px;
    .count {
      border: @border-style;
      height: 240px;
      border-top: solid #ff910f;
      .ctitle {
        height: 50px;
        p {
          color: #ff910f;
          margin-top: 5px;
          margin-left: 5px;
        }
        .count {
        }
      }
      .ccontent {
        border-top: @border-style;
        .row-bg {
          margin-top: 10px;
          div {
            height: 160px;
            border-radius: 10px;
            text-align: center;
            p {
              color: white;
              padding-top: 6px;
            }
            .count-num {
              font-size: 80px;
              margin-top: -10px;
            }
          }
        }

      }
    }
    .msg {
      margin-top: 18px;
      border: @border-style;
      border-top: solid #ff5d44;
      height: 322px;
      .ctitle {
        height: 50px;
        /*p {*/
          /*color: #ff5d44;*/
          /*margin-top: 5px;*/
          /*margin-left: 5px;*/
        /*}*/
      }
      .ccontent {
        border-top: @border-style;
      }
    }
  }
</style>
